<template>
  <div class="update-rate">
    <div class="container" v-loading="loading">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="交易费率配置" name="1">
                <div class="setting-box">
                    <table  border="0" cellspacing="0">
                        <thead>
                            <tr>
                                <th>通道名称</th>
                                <th>费率</th>
                                <th>提现手续费</th>
                                <th>推荐人分润费率</th>
                                <th>状态</th>
                                <th>修改</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(cell,index) in this.rateForm" v-if="cell.payType === 1" :key="index">
                                <td><span v-html="cell.channelName"></span></td>
                                <td><span v-html="cell.rate || '未设置'"></span></td>
                                <td><span v-html="cell.extraFee || '未设置'"></span></td>
                                <td><span v-html="cell.gradeRate || '未设置'"></span></td>
                                <td><span v-html="cell.status==='1'?'开启':'关闭'"></span></td>
                                <td><el-button @click="handleUpdateRate(cell)" type="text">修改</el-button></td>
                            </tr>
                        </tbody>
                    </table>
     
                </div>
            </el-tab-pane>
            <!-- <el-tab-pane label="提现费率配置" name="2">
                <div class="setting-box">
                     <table  border="0" cellspacing="0">
                        <thead>
                            <tr>
                                <th>通道名称</th>
                                <th>费率</th>
                                <th>手续费</th>
                                <th>推荐人分润费率</th>
                                <th>状态</th>
                                <th>修改</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(cell,index) in this.rateForm" v-if="cell.payType === 2" :key="index">
                                <td><span v-html="cell.channelName"></span></td>
                                <td><span v-html="cell.rate || '未设置'"></span></td>
                                <td><span v-html="cell.extraFee || '未设置'"></span></td>
                                <td><span v-html="cell.gradeRate || '未设置'"></span></td>
                                <td><span v-html="cell.status==='1'?'开启':'关闭'"></span></td>
                                <td><el-button @click="handleUpdateRate(cell)" type="text">修改</el-button></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </el-tab-pane> -->

        </el-tabs>
        <div class="update-form" v-if="handleUpdate">
            <el-form ref="updateForm" :model="updateForm" label-width="150px">
                 <el-form-item label="通道名称">
                    <el-input disabled v-model="updateForm.channelName"></el-input>
                </el-form-item>
                <el-form-item label="费率">
                    <!-- <el-input  v-model="updateForm.rate"></el-input> -->
                    <el-input-number v-model="updateForm.rate" :step="0.0001" :min="+updateForm.costRate || 0" :max="1" label="费率配置"></el-input-number>
                    <span>最小费率为{{updateForm.costRate}}</span>
                </el-form-item>
                <el-form-item label="提现手续费">
                    <!-- <el-input  v-model="updateForm.extraFee"></el-input> -->
                    <el-input-number v-model="updateForm.extraFee" :precision="1" :step="1" :min="updateForm.minExtraFee || 0" :max="100" label="手续费配置"></el-input-number>
                    <span>最小手续费为{{updateForm.minExtraFee}}</span>
                </el-form-item>
                <el-form-item label="推荐人分润手续费">
                    <el-input-number v-model="updateForm.gradeRate" :step="0.0001" :min="0" :max="1" label="分润费率配置"></el-input-number>
                    <!-- <span>最小费率为{{updateForm.minRate}}</span> -->
                    <!-- <el-input  v-model="updateForm.gradeRate"></el-input> -->
                </el-form-item>
                <el-form-item label="">
                    <el-button @click="handleSubmitUpdate" type="danger">提交修改</el-button>
                    <el-button @click="handleUpdate = false" >取消修改</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  name:'update-rate',
  props:{
      cell:{
          type:Object,
          default:function(){
              return {}
          }
      }
  },
  data () {
    return {
        handleUpdate:false,
        activeName:"1", // 1 交易 2 提现
        loading:false,
        rateForm:[],
        updateForm:{
            rate:'',
            extraFee:'',
            gradeRate:'',
            channelName:''
        }
    };
  },
  components: {},
  created() {
      this.init();
  },
  mounted() {},
  methods: {
      init(){
          this.loading = true;
          this.handleUpdate = false;
         let url = `user/channel/list/user_channel_rate`;
         let params = `userId=${this.cell.userid}`;
         this.$Http.post(url,params).then(res=>{
             this.loading = false;
             if(res.data.resp_code==='000000'){
                 this.rateForm = res.data.result;
             }else{
                 this.$notify.error({
                    title: "温馨提示",
                    message:res.data.resp_message
                }); 
             }
         }).catch(err=>{
             this.loading = false;
             this.$notify.error({
                title: "温馨提示",
                message:"服务器繁忙！获取费率信息失败！"
            }); 
         })
      },
      handleUpdateRate(cell){
        console.log(cell)
         this.updateForm = {...cell};
         this.handleUpdate = true;
      },
      handleSubmitUpdate(){
          // 提交修改
        const {userId,channelId,channelNo,payType,rate,extraFee,gradeRate,costRate,minExtraFee} = this.updateForm;
        
        // 校验参数
        if(rate < +costRate || rate < 0){
            this.$notify.error({
                title: "温馨提示",
                message:"费率超出最低限制"
            }); 
            return;
        }

        if(extraFee < minExtraFee || extraFee < 0){
            this.$notify.error({
                title: "温馨提示",
                message:"手续费超出最低限制"
            }); 
            return;
        }

        let url = `user/channel/rate/update_rate`;
        let params=`userId=${userId}&channelId=${channelId}&channelNo=${channelNo}&type=${payType}&rate=${rate}&extraFee=${extraFee}&gradeRate=${gradeRate}`;
        
        this.$Http.post(url,params).then(res=>{
            if(res.data.resp_code === '000000'){
                this.$notify.success({
                    title: "操作成功",
                    message:"修改用户费率成功！"
                });
                this.init();
            }else{
                this.$notify.error({
                    title: "温馨提示",
                    message:res.data.resp_message
                }); 
            }
        }).catch(err=>{
            this.$notify.error({
                title: "温馨提示",
                message:"设置用户费率失败！"
            }); 
        })

      },
      handleClick(tab,event){
        //   console.log(tab.label);
        this.handleUpdate = false;
      },
  }
}

</script>
<style scoped>
.update-rate{
    min-width: 400px;
    min-height: 300px;
}
.setting-box{
     padding: 20px;
}
table{
    background-color: #FFF;
    width: 100%;
    font-size: 12px;
}
th{
    position: relative;
    word-wrap: normal;
    text-overflow: ellipsis;
    vertical-align: middle;
    border-bottom: 1px solid #ebeef5;
    
}
thead{
    padding: 8px 0;
    color: #909399;
}
tr{
    padding: 8px 0;
}
tr:hover{
    background-color: #F5F7FA;
}
td{
    border: none;
    border-bottom: 1px solid #ebeef5;
    text-align: center;
}
.update-form{
    padding: 20px 20px 20px 0;
    border-top: 1px solid #efefef;
}
</style>